<template>
    <div>
        <el-card class="box-card">
            <el-form>
                <el-form-item label="秒杀订单超时:">
                    <el-input v-model="input1" size="large">
                        <template #append>分</template>
                    </el-input>
                    <span>未付款,订单自动关闭</span>
                </el-form-item>
                <el-form-item label="正常订单超时:">
                    <el-input v-model="input2" size="large">
                        <template #append>分</template>
                    </el-input>
                    <span>未付款,订单自动关闭</span>
                </el-form-item>
                <el-form-item class="input" label="发货超时:">
                    <el-input v-model="input3" size="large">
                        <template #append>天</template>
                    </el-input>
                    <span>未收货,订单自动完成</span>
                </el-form-item>
                <el-form-item label="订单完成超过:">
                    <el-input v-model="input4" size="large">
                        <template #append>天</template>
                    </el-input>
                    <span>自动结束交易,把你申请售后</span>
                </el-form-item>
                <el-form-item label="订单完成超过:">
                    <el-input v-model="input5" size="large">
                        <template #append>天</template>
                    </el-input>
                    <span>自动五星好评</span>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="open">提交</el-button>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { IAdminOrder } from '../../request/QmsAdminConreiller/index'
import { reactive, ref } from "vue";


//绑定的input的数据
const input1 = ref("2");
const input2 = ref("2");
const input3 = ref("2");
const input4 = ref("444");
const input5 = ref("1");

const open = () => {
    ElMessageBox.confirm(
        '是否要提交修改',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '提交成功',
            })
            api.admin.orderSetting({ id: 1 })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
</script>

<style lang="scss" scoped>
.box-card {
    position: relative;
    width: 800px;
    height: 480px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    margin-top: 50px;
}

.el-form {
    margin-top: 60px;
    margin-left: 80px;
}

.el-input {
    width: 300px;
}

.input {
    padding-left: 30px;
}

.el-button {
    margin-left: 190px;
    margin-top: 10px;
}

span {
    margin-left: 20px;
}

:deep .el-form-item__label {
    margin-top: 3px;
    margin-right: 10px;
}
</style>